<template>
	<main class="cart_box background_f0">
		<div class="cart_content clearfix background_f0">
			<div class="margin_bot10">
				<div class="border_bot_dcdcdc padding_top10_bot10 padding_lf10_rg10 background_fff position_rel">
					<div class="font_size16 line_height2  color333">
						<span class="margin_right20 font_weight_bold" style="margin-left: 22px;">
							{{adrSelected.ReceiverName}}
						</span>
						<span class="font_weight_bold">{{adrSelected.ReceiverPhone}}</span>
						<span v-show="adrSelected.isDefault||adrSelected.Checked" class="default_adr_btn">默认</span>
					</div>
					<div class="color666">
						<img src="../assets/images/adr_icon0.png" />
						<span>
							{{adrSelected.AddrProvince}}
							{{adrSelected.AddrCity}}
							{{adrSelected.AddrArea}}
							{{adrSelected.AddrDetail}}
						</span>
					</div>
					<div @click="popupVisiblePAdrSelect = true" class="arrow_right_btn">
						<img src="../assets/images/arrow_right_icon.png" />
					</div>
				</div>
			</div>
			<div v-for="item in cartDatas" class="cart_item margin_bot10">
				<div class="cart_detial_box clearfix">
					<a href="javascript:void(0)" class="cart_product_link">
						<img v-lazy="root + item.ImgPath">
					</a>
					<div class="item_names">
						<a href="javascript:void(0)">
							<span>{{item.ProductName}}</span>
						</a>
					</div>
					<div class="cart_weight">
						<i class="my_weigth">{{item.Content}}</i>
						<!--<span class="my_color">颜色:AT800/16</span>-->
					</div>
					<div class="cart_product_sell">
						<span class="product_money">￥<strong class="real_money">{{item.SalePrice}}</strong></span>
						<div class="cart_add clearfix text_align_rg">
							<span class="">&times;{{item.Quantity}}</span>
						</div>
					</div>
				</div>
			</div>
			<div class="line_height40 overflow_hidden background_fff padding_lf10_rg10">
				<div class="fl">
					<span class="margin_right10">余额</span>
					<span class="margin_right10">共￥<strong>{{memberInfo.Balance}}</strong></span>
					<span v-show="accountMoneySelected">使用 ￥<strong>{{totalPrice.toFixed(2)}}</strong></span>
				</div>
				<div class="fr">
					<mt-switch v-model="accountMoneySelected"></mt-switch>
				</div>
			</div>
		</div>
		<div class="cart_fo">
			<footer class="cart_footer">
				<div class="count_money_box">
					<span class="font_size16 color_main_red">实付款：￥<strong>{{totalPrice.toFixed(2)}}</strong></span>
					<a @click="submitOrderBtn" href="javascript:void(0)" class="go_pay">
						<span>提交订单</span>
					</a>
				</div>
			</footer>
		</div>
		<mt-popup v-model="popupVisiblePAdrSelect" position="bottom">
			<div class="width100 height100 padding_lf6_rg6 box_shadow_top background_fff">
				<div v-for="item in addressList" class="margin_bot10 padding_lf6_rg6 background_fff">
					<div @click="selectAdrBtn(item)" class="border_bot_dcdcdc padding_top10_bot10 position_rel">
						<div class="font_size16 line_height1_5">
							<span>{{item.ReceiverName}}</span>
							<span>{{item.ReceiverPhone}}</span>
							<span v-show="item.Checked==1" class="default_adr_btn">默认</span>
						</div>
						<div class="color666">
							{{item.AddrProvince}}{{item.AddrCity}}{{item.AddrArea}}{{item.AddrDetail}}
						</div>
						<div v-show="adrSelected.Id === item.Id" class="adr_select_icon_wrap">
							<img src="../assets/images/selected_icon.png" />
						</div>
					</div>
				</div>
			</div>
		</mt-popup>
	</main>
</template>
<script>
	import { TabContainer, TabContainerItem } from 'mint-ui';
	import {Toast} from 'mint-ui';
	import { Switch } from 'mint-ui';
	export default {
		created() {
			let _this = this
			this.cartDatas = this.$route.query.goodsDataList
			console.log('this.cartDatas', this.cartDatas)
			for(var i = 0; i < _this.cartDatas.length; i++) {
				_this.totalPrice += Number(_this.cartDatas[i].SalePrice) * _this.cartDatas[i].Quantity
			}
		},
		data() {
			return {
				root: this.root,
				cartDatas: [],
				adrSelected: {},
				accountMoneySelected: false,
				memberInfo: {},
				totalPrice: 0,
				popupVisiblePAdrSelect: false,
				addressList: [],
			}
		},
		mounted() {
			let _this = this;
			_this.getDefaultAdr();
			_this.getAccountMoney();
			_this.getAdrList();
		},
		methods: {
			submitOrderBtn() {
				let _this = this;
				var SkuAndNum = []
				var CartGoodsId = []
				for(var i = 0; i < _this.cartDatas.length; i++) {
					SkuAndNum.push([_this.cartDatas[i].SkuId, _this.cartDatas[i].Quantity])
					CartGoodsId.push(_this.cartDatas[i].Id)
				}
				_this.$http.post('/client/Orders', {
					SkuAndNum: SkuAndNum,
					AddressId: _this.adrSelected.Id
				}, localStorage.Authorization, res => {
					if(res.code === 200) {
						//提交订单后删除购物车该商品
						for(var e=0; e<CartGoodsId.length; e++) {
							_this.deleteCartGoods(CartGoodsId[e])
						}
						if(_this.accountMoneySelected === true) {
							_this.OrderPay(res.data.OrderId)
						} else {
							_this.$router.push({
								path: '/wx/checkstand',
								query: {
									'OrderId': res.data.OrderId,
									'totalPrice': this.totalPrice
								}
							})
						}
					}else if(res.code === 101) {
						localStorage.fromPath = _this.$route.fullPath
						_this.$router.push({
							path: '/wx/login'
						})
					}
				})
			},
			getDefaultAdr() {
				let _this = this
				_this.$http.get('/client/Members', {
					defaultAddress: 1
				}, localStorage.Authorization, res => {
					console.log('获取默认地址res', res)
					if(res.code === 200) {
						_this.adrSelected = res.data
						_this.$set(_this.adrSelected, 'isDefault', true)
					}else if(res.code === 101) {
						localStorage.fromPath = _this.$route.fullPath
						_this.$router.push({
							path: '/wx/login'
						})
					} else {
						_this.$http.get('/client/Address', null, localStorage.Authorization, res => {
							console.log('地址getres', res)
							if(res.code === 200) {
								_this.adrSelected = res.data.list[0]
							}
						})
						_this.$set(_this.adrSelected, 'isDefault', false)
					}
				})
			},
			getAdrList() {
				let _this = this
				_this.$http.get('/client/Address', null, localStorage.Authorization, res => {
					console.log('地址getres', res)
					if(res.code === 200) {
						_this.addressList = res.data.list
					}else if(res.code === 101) {
						localStorage.fromPath = _this.$route.fullPath
						_this.$router.push({
							path: '/wx/login'
						})
					}
				})
			},
			getAccountMoney() {
				let _this = this
				_this.$http.get('/client/Members', null, localStorage.Authorization, res => {
					if(res.code === 200) {
						_this.memberInfo = res.data.list[0]
					}else if(res.code === 101) {
						localStorage.fromPath = _this.$route.fullPath
						_this.$router.push({
							path: '/wx/login'
						})
					}
				})
			},

			OrderPay(OrderId) {
				let _this = this
				_this.$http.post('/client/OrderPays', {
					OrderId: OrderId,
					PayType: 1
				}, localStorage.Authorization, res => {
					console.log('支付res', res)
					if(res.code === 200) {
						Toast(res.data)
						setTimeout(function(){
							_this.$router.go(-1)
						}, 1500)
					}else if(res.code === 101) {
						localStorage.fromPath = _this.$route.fullPath
						_this.$router.push({
							path: '/wx/login'
						})
					}
				})
			},
			deleteCartGoods(id) {
				//提交订单后删除购物车商品
				let _this = this
				_this.$http.delete('/Client/Carts/' + id, null, localStorage.Authorization, res => {
					console.log('删除了购物车该商品 res', res)
					if(res.code === 200) {
						
					}else if(res.code === 101) {
						localStorage.fromPath = _this.$route.fullPath
						_this.$router.push({
							path: '/wx/login'
						})
					}
				})
			},
			selectAdrBtn(item) {
				let _this = this
				_this.adrSelected = item
			}
		},
		watch: {

		}
	}
</script>
<style scoped="scoped">
	.cart_footer {
		bottom: 60px;
	}
	
	.cart_item .cart_detial_box {
		margin-left: 10px;
	}
	
	.shop_info {
		margin-left: 10px;
	}
	
	.cart_item {
		height: 120px;
		padding-top: 10px;
	}
	
	.cart_content {
		padding: 0;
		margin: 0;
	}
	
	.cart_footer .count_money_box {
		margin-left: 10px;
		line-height: 50px;
		text-align: right;
	}
	
	.arrow_right_btn {
		position: absolute;
		right: 10px;
		top: 18px;
		padding: 10px 0;
	}
	
	.mint-switch {
		margin-top: 4px;
	}
	
	.mint-popup-bottom {
		width: 100%;
		height: 70%;
	}
	
	.adr_select_icon_wrap {
		position: absolute;
		top: 10px;
		right: 10px;
		padding: 10px;
	}
</style>